<html>
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">
var CLIENT_ID = '960049419468-eo4qja1m6nome94jfj340iddkuhhpvbt.apps.googleusercontent.com';
var SCOPES = 'https://www.googleapis.com/auth/drive';

/**
 * Called when the client library is loaded to start the auth flow.
 */
function handleClientLoad() {
    window.setTimeout(checkAuth, 1);
}

/**
 * Check if the current user has authorized the application.
 */
function checkAuth() {
    gapi.auth.authorize(
        {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
        handleAuthResult);
}

/**
 * Called when authorization server replies.
 *
 * @param {Object} authResult Authorization result.
 */
function handleAuthResult(authResult) {
    var authButton = document.getElementById('authorizeButton');
    var syncButton = document.getElementById('syncButton');
    authButton.style.display = 'none';
    syncButton.style.display = 'none';
    if (authResult && !authResult.error) {
        // Access token has been successfully retrieved, requests can be sent to the API.
        syncButton.style.display = 'block';
        syncButton.onclick = function() {
            gapi.client.load('drive', 'v2', function () {
                sync(function () {
                    console.log('synced');
                });
            });
        };
    } else {
        // No access token could be retrieved, show the button to start the authorization flow.
        authButton.style.display = 'block';
        authButton.onclick = function() {
            gapi.auth.authorize(
                {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false},
                handleAuthResult);
        };
    }
}

/**
 * Insert new file.
 *
 * @param {File} fileData File object to read data from.
 * @param {Function} callback Function to call when the request is complete.
 */
function sync(callback) {
    const boundary = '-------314159265358979323846';
    const delimiter = "\r\n--" + boundary + "\r\n";
    const close_delim = "\r\n--" + boundary + "--";

    var contentType = 'application/json';
    var metadata = {
        'title': 'ComputationStructures.workbook',
        'mimeType': contentType
    };

    var syncData = {1: 2, 3:4};
    var multipartRequestBody =
        delimiter +
        'Content-Type: application/json\r\n\r\n' +
        JSON.stringify(metadata) +
        delimiter +
        'Content-Type: ' + contentType + '\r\n' +
        '\r\n' +
        JSON.stringify(syncData) +
        close_delim;

    var reqparams = {
        'path': '/upload/drive/v2/files',
        'method': 'PUT',   // start with update request
        'params': {'uploadType': 'multipart'},
        'headers': {
            'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
        },
        'body': multipartRequestBody
    }

    gapi.client.request(reqparams).execute(function (jsonResp,httpResp) {
        try {
            httpResp = JSON.parse(httpResp).gapiRequest.data;
            // if update request failed, try an insert request
            if (httpResp.status == 404) {
                reqparams.method = 'POST';
                gapi.client.request(reqparams).execute(function (jsonResp2,httpResp2) {
                    httpResp = JSON.parse(httpResp2).gapiRequest.data;
                    if (httpResp.status == 200 && callback) callback();
                });
            }
            else if (httpResp.status == 200 && callback) callback();
        } catch (e) {
            console.log(e);
        }
    });
}
</script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  </head>
  <body>
    <input type="button" id="syncButton" style="display: none" value="Sync" />
    <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
  </body>
</html> 
